<template>
    <div>
        <VanNavBar 
            :title="title" 
            left-arrow
            fixed
            :right-text="rightText"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            ></VanNavBar>
    </div>
</template>

<script setup lang="ts">
// 需求：
// 1. 实现点击返回按钮，返回上一个页面（历史记录）
// 2. 暴露一个props属性, title 设置标题
// 3. 暴露一个props属性, rightText 设置标题
// 4. 点击右侧的文字按钮，要做的事情是无法确定的。通过事件来通知父组件

import router from '@/router';

const props = defineProps<{
    title?: string
    rightText?: string
    back?: () => void
}>()

const emit = defineEmits<{
    (e: 'clickRight'): void
}>()

// 实现返回
const onClickLeft = () => {
    if (props.back) return props.back()
    // 判断历史记录中是否有回退
    if (history.state?.back) {
        router.back()
    } else {
        router.push('/')
    }
}

// 点击右键的文字要实现的功能
const onClickRight = () => {
    emit('clickRight')
}
</script>

<style scoped lang="scss">
    ::v-deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }
    &__text {
      font-size: 15px;
    }
  }
}
</style>